<template>
  <!-- 好生活资金池-详情-网络推客结佣纪录-->
  <div class="internetTwitterDetail">
    <brokerInfo :infos="info"></brokerInfo>
    <tableList :tableData="tableData" :tableInfos="tableInfos" :tableFormatter="tableFormatter"></tableList>
  </div>
</template>

<script type="text/ecmascript-6">
import brokerInfo from "./brokerInfo";
import tableList from "../../common/tableList";
import utils from "@/common/utils.js";
import api from "@/api/apiPath";
export default {
  components: {
    brokerInfo,
    tableList
  },
  data() {
    return {
      tableData: [],
      firstFlag: true,
      tableInfos: [
        { label: "结佣编号", prop: "code" },
        { label: "提交时间", prop: "creatTime" },
        { label: "付款时间", prop: "payTime" },
        { label: "申请结佣金额（元）", prop: "brokerAmount" },
        { label: "税率（%）", prop: "taxBrokerageRate" },
        { label: "应扣税费（元）", prop: "taxBrokerageAmount" },
        { label: "应付款金额（元）", prop: "payBrokerage" },
        { label: "前佣（元）", prop: "brokerFrontAmount" },
        { label: "后佣（元）", prop: "brokerAfterAmount" },
        { label: "待结佣金（元）", prop: "brokerAmountPaying" },
        { label: "审核状态", prop: "examineState" }
      ],
      brokerTypeArray: [
        "网络推客",
        "兼职经纪人",
        "案场销售",
        "职业经纪人",
        "经纪门店",
        "经纪公司",
        "置业专家",
        "开发商"
      ],
      info: {}
    };
  },
  created() {},
  mounted() {},
  methods: {
    tableFormatter(prop, val) {
      let moneyFormatter = [
        "brokerAmount",
        "taxBrokerageAmount",
        "payBrokerage",
        "brokerFrontAmount",
        "brokerAfterAmount",
        "brokerAmountPaying"
      ];
      if (moneyFormatter.includes(prop)) {
        return this.formatMoney(val);
      }
      if(['creatTime'].includes(prop)){
        return utils.getTimeString(+val)
      }
      let propMap = {
        examineState: [
          "",
          "待审核",
          "运营审核通过",
          "财务审核通过",
          "运营审核拒绝",
          "财务审核拒绝"
        ]
      };
      return propMap[prop] ? propMap[prop][val] : val;
    },
    searchList() {
      this.axios
        .get(api.getCashPoolNetworkList + "/" + this.userInfo.orderId)
        .then(res => {
          if (res.data.code == 200) {
            this.firstFlag = false;
            this.tableData = res.data.data;
          }
        });
    },
    formatMoney(val){
      return  val? utils.formatMoney(val)+"元": "0.00 元"
    },
    getUserInfo(val) {
      let {
        brokerType,
        brokerName,
        customerName,
        customerPhone,
        devName,
        housePrise,
        actualPayment,
        cellName,
        brokerBrokerage,
        brokerFrontAmount,
        brokerAfterAmount
      } = val;
      this.info = {
        角色: this.brokerTypeArray[brokerType],
        网络推客: brokerName,
        客户姓名: customerName,
        电话: utils.formatPhoneNumber(customerPhone),
        楼盘: devName,
        房款: this.formatMoney(housePrise) ,
        成交价: this.formatMoney(actualPayment) ,
        房间号: cellName,
        "总佣金（元）":  this.formatMoney(brokerBrokerage),
        "前佣（元）":this.formatMoney(brokerFrontAmount),
        "后佣（元）": this.formatMoney(brokerAfterAmount)
      };
    }
  },
  props: ["userInfo", "active"],
  watch: {
    active(val) {
      if (this.firstFlag && val) {
        this.searchList();
      }
    },
    allInfo(val) {
      this.getUserInfo(val);
    }
  },
  computed: {
    allInfo() {
      return this.userInfo.allInfo;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
